<template>
  <!-- $event传递事件对象 -->
  <!-- @click == v-on:click -->
  <h1 @click="addEvent(num, $event)">{{ num }}</h1>

  <!-- 一个事件绑定多个处理函数 -->
  <h1
    :style="{ background: mycolor }"
    @click="addEvent(num, $event), changeColor('green')"
  >
    {{ num }}
  </h1>

  <!-- 事件修饰符 -->
  <!-- 
    once:只执行一次
    stop：阻止冒泡
    prevent：阻止默认事件
  -->
  <h1 @click.once="addEvent(num, $event)">{{ num }}</h1>

  <!-- 按键修饰符 -->
  <!-- 
    enter/tab/delete/esc/space/up/down/left/right
    ctrl/alt/shift/meta(windows键)
   -->
  <!-- 
    按住不放都会重复触发
    keydown:键盘任意键
    keypress：键盘字符键（alt,ctrl,shift等不会触发）
  -->
  <input type="text" @keydown.enter="search" />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      num: 1,
      mycolor: "red",
    };
  },
  methods: {
    addEvent(number, event) {
      this.num += number;
      console.log(this.num);
    },
    changeColor(newColor) {
      this.mycolor = newColor;
    },
    search(){
      console.log('触发')
    }
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>
